<template>
    <div style="display: flex;flex-direction: column;height: 100%;">
        <!-- 弹窗start -->
        <el-dialog title="添加新的用户" width="500px" :visible.sync="showDislog" append-to-body="True" @closed="initDialog">
            <el-form label-position="right" label-width="80px" :model="addForm" :rules="rules" ref="ruleForm">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="企业名称">
                    <el-input v-model="addForm.comName"></el-input>
                </el-form-item>
                <el-form-item label="职位">
                    <el-input v-model="addForm.job"></el-input>
                </el-form-item>
                <el-form-item label="人像图片" prop="personImage">
                    <el-upload class="avatar-uploader" :action="baseURL + '/api/file/upload/'" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    </el-upload>
                    <div style="color: red;">
                        * 照片格式为jpg，png
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button style="background-color: #8694C6;border: 0;" type="primary"
                        @click="submitNewAdd">提交</el-button>
                    <el-button @click="showDislog = false">返回</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 弹窗end -->
        <div style="text-align: left;padding-left: 10px;border-left: solid 3px blue;margin-bottom: 10px;">用户录入</div>
        <div
            style="flex: 1;background-color: #EAEEF7;width: calc(100% - 20px);height:100%;padding: 10px;display: flex;flex-direction: column;">
            <div style="
            display: flex;
            justify-content: space-between;
            padding: 10px 10px;
            background-color:#F6F7FB ;
            margin-bottom: 10px;">
                <el-input v-model="personName" placeholder="请输入内容" style="width: 200px;"></el-input>
                <el-button style="background-color:#8694C6 ;color: white;" @click="searchForData">查询</el-button>
            </div>
            <div style="background-color: #F6F7FB;flex: 1;width: 100%;">
                <div style="width: 100%;display: flex;justify-content: right;padding: 10px 0;">
                    <el-button @click="openAddForm">添加</el-button>
                    <el-button style="margin-right: 10px;" type="danger" @click="deleteBatch">删除</el-button>
                </div>
                <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column v-for="item, index in columnArray" :key="index" :prop="item.prop"
                        :label="item.columnName" :width="item.width != -1 ? item.width : null">
                    </el-table-column>
                    <el-table-column prop="personImage" label="人像">
                        <template slot-scope="scope">
                            <img :src="scope.row.personImage" style="width: 100px;height: 100px;" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" v-if="OperationArr.length > 0">
                        <template slot-scope="scope">
                            <el-link :type="opBar.operationType" v-for="opBar in OperationArr" :key="opBar.id"
                                style="margin-right:10px;" @click="doOperation(scope.row, opBar.id)">{{ opBar.id == '48' ||
                                    opBar.id == '42' || opBar.id ==
                                    '44' || opBar.id ==
                                    '46' ? (scope.row.valid
                                        == 1 ? "锁定" : "解锁")
                                    :
                                    opBar.operationContent }}</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import request from "../axios/request";
export default {
    data() {
        return {
            personName: null,
            multipleSelection:null,
            tableData: [],
            columnArray: [],
            OperationArr: [],
            addForm: {
                name: null,
                comName: null,
                job: null,
                personImage: null,
            },
            imageUrl: '',
            showDislog: false,
            pageNo: 1,
            pageSize: 10,
            rules: {
                name: [
                    { required: true, message: '请输入用户姓名', trigger: 'blur' }
                ],
                personImage: [
                    { required: true, message: '请上传人像照片', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        async submitNewAdd() {
            let resOfAddNewUser = await request({
                url: "/api/user/addUser",
                method: "POST",
                data: this.addForm
            });
            if (resOfAddNewUser.data.status == 200) {
                this.initPage()
            }
        },
        async getTableColumn() {
            let resOfGettingTableColumns = await request({
                url: "/api/table/getColumn/1",
                method: "GET",
            });
            this.columnArray = resOfGettingTableColumns.data.data;
            // console.log();
        },
        async getOperationArr() {
            let resOfGettingOperationArr = await request({
                url: "/api/operation/getTableOperations/1",
                method: "GET",
            });
            this.OperationArr = resOfGettingOperationArr.data.data;
            // console.log(this.OperationArr);
        },
        async searchForData() {
            let resOfGettingUserPage = await request({
                url: "/api/user/getUserInfoPage",
                method: "POST",
                data: {
                    pageNo: this.pageNo,
                    pageSize: this.pageSize,
                    inputOfSearch: this.personName
                }
            });
            this.tableData = resOfGettingUserPage.data.data.data
        },
        openAddForm() {
            this.showDislog = true
        },
        async deleteBatch(){
            let resOfDeleteBatch = await request({
                url: "/api/user/deleteBatch",
                method: "POST",
                data: {
                    list:this.multipleSelection
                }
            });
            if (resOfDeleteBatch.data.status == 200) {
                this.initPage()
            }
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.addForm.personImage = res.data
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        async getTableData() {
            let resOfGettingUserPage = await request({
                url: "/api/user/getUserInfoPage",
                method: "POST",
                data: {
                    pageNo: this.pageNo,
                    pageSize: this.pageSize
                }
            });
            // console.log(resOfGettingUserPage.data.data);
            this.tableData = resOfGettingUserPage.data.data.data
            // console.log(this.tableData);
        },
        initPage() {
            this.showDislog = false
            this.baseURL = request.defaults.baseURL
            this.getTableColumn()
            this.getOperationArr();
            this.getTableData()
        },
        initDialog() {

        },
        handleSelectionChange(val) {
            this.multipleSelection = []
            let length = val.length
            for (let index = 0; index < length; index++) {
                this.multipleSelection.push(val[index].id)
            }
        },
    },
    created() {
        this.initPage()
    }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: white;
    width: 200px;
    height: 200px;
    background: url("../assets/uploadImg.png") center center;
    background-size: contain;
    box-shadow: 0 10px 5px 0 rgba(237, 239, 241, 0.35);
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar {
    width: 200px;
    height: 200px;
    display: block;
}
</style>